Day5超連結

2023 iThome 鐵人賽

DAY 5

自我挑戰組

學習網頁前端基本的技術，包含如何使用HTML標籤跟CSS做出基本的網頁版型，了解bootstrap template如何建置網頁架構。系列第 5 篇

15th鐵人賽

jenny

2023-09-20 09:57:00

175 瀏覽

分享至

1.絕對URL：
意思是網址包含完整路徑和位置，用於定位互聯網上的特定的資料。例如網頁、圖片、文件。
2.相對URL:
用於在網站內部連接不同頁面或資源，它們不需要包含完整的網址信息。
通常只包含資料夾和文件名稱。
相對URL的優點包括：
相對性：它們相對於當前文件的位置，因此不需要包含完整的網址，使得網站更容易維護和移植。
靈活性：當網站的結構發生變化時，相對URL可以較容易地適應變化，而無需修改完整的URL。
範例如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>a</title>
    </head>
    <body>
        <!--絕對位置-->
        <ul>
            <li><a href="https://www.youtube.com/watch?v=s9hGDIpwfXw">匿名的好友</a></li>
        </ul>
        
        <!--相對位置-->
        <ul>
           <li> <a href="align.html">前往align頁面</a></li>
           
        </ul>
         <!--相對位置-->
        <ul> 
            <li><img src="OIP.jpg" alt="圖像"></li>
        </ul>
        
    </body>
</html>

呈現畫面:

3.指定相對路徑資訊<base>:
是 HTML 中的一個元素，它用來指定網頁中所有相對 URL 的基本 URL。
通常位於 <head> 部分，並且只能在一個 HTML 文件中出現一次。
作用是為相對 URL 提供一個基準點，以確定它們的完整 URL。

程式碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>網站首頁</title>
    <base href="file:///C:/Users/a0981/OneDrive/桌面/html/">
</head>
<body>
    <h1>歡迎來到網站</h1>
    <p>請參閱 <a href="hr.html">關於我們</a> 頁面。</p>
    <p>查看我們的 <a href="p.html">產品</a>。</p>
</body>
</html>

呈現畫面:

書籤:
在HTML中，可利用<a>來建立書籤，書籤通常是一種超連結，用於在同一頁面內快速跳轉到特定的位置。
程式碼:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML書籤示例</title>
</head>
<body>
    <h1>HTML書籤示例</h1>
    
    <ul>
        <li><a href="#匿名的好友">匿名的好友</li>
        <li><a href="#會呼吸的痛">會呼吸的痛</li>
    </ul>
    <hr>

    <p><a name="匿名的好友">匿名的好友</a></p>
    <pre>杜松混合茉莉的風
        回憶裡被愛那股激動
        天色好紅 溫柔好濃
        在胸口浮現 你的臉容
        一起活在這城市迷宮
        提起你名字心還跳動 卻沒重逢

呈現畫面: